/*
 * @Descripttion:
 * @version: 1.0.0
 * @Author: Shentong
 * @Date: 2021-04-09 12:34:34
 * @LastEditors: Shentong
 * @LastEditTime: 2021-12-27 15:49:34
 */
// wxbff509409c85ec72
import React, { useEffect, useState } from 'react'
import Taro, { useDidShow, useShareAppMessage } from '@tarojs/taro'
import { connect } from 'react-redux'

import { View, Image, Button } from '@tarojs/components'

import { toolsList } from '@/constants/data'

import { getSchoolPhone } from '@/api/school'

import HeadBg from '@/src/assets/my/headBg.png'
import DefaultAvatar from '@/src/assets/my/defaultAvatar.png'

import { AtAvatar, AtButton, AtGrid, AtList, AtListItem } from 'taro-ui'

import styles from './index.module.scss'

function My() {
  const [isLogin, setLoginStatus] = useState<boolean>(false)
  const [hasUserInfo, setHasUserInfo] = useState<boolean>(false)
  const [avatarUrl, setAvatarUrl] = useState<string>(DefaultAvatar)
  const [nickName, setNickName] = useState<string>('')
  const [wxGroupUrl, setWxGroupUrl] = useState<string>('')
  const [sManagerPhone, setSmanagerPhone] = useState<string| number>('')

    // 获取本地存储的用户信息
    const getStorageUserInfo = () => {
      const { avatarUrl: avatar,  nickName: name, wxUrl = '',sManagerPhone: phone} = Taro.getStorageSync('userInfo') || {}
      const token = Taro.getStorageSync('token') || ''

      setSmanagerPhone(phone)

      setWxGroupUrl(wxUrl)

      if (name) {
        setNickName(name)
        setAvatarUrl(avatar)

        setHasUserInfo(true)
        setLoginStatus(token)
      }
    }

  const gridClick = item => {
    switch (item.value) {
      case '我的优惠券':
        Taro.navigateTo({
          url: '/pages/coupon/index'
        })
        break;
      case '我的评价':
          Taro.navigateTo({
            url: '/pages/evaluate/index'
          })
          break;
      case '我的收藏':
        Taro.navigateTo({
          url: '/pages/collect/index'
        })
        break;
      case '意见反馈':
        Taro.navigateTo({
          url: '/pages/opinion/index'
        })
        break;
      case '我的足迹':
        Taro.navigateTo({
          url: '/pages/footmark/index'
        })
        break;
      case '我的红包':
        Taro.navigateTo({
          url: '/pages/redPacket/index'
        })
        break;
      case '账户余额':
        Taro.navigateTo({
          url: '/pages/account/index'
        })
        break;
      case '我的地址':
        Taro.navigateTo({
          url: '/pages/myAddress/index'
        })
        break;
      default:
        break;
    }
  }

  // 关于我们
  const aboutUs = () => {
    Taro.navigateTo({
      url: '/pages/aboutUs/index'
    })
  }

  const callPhone = phoneNumber => {
    console.log('Number(phoneNumber)',isNaN(phoneNumber))
    !isNaN(phoneNumber) && Taro.makePhoneCall({ phoneNumber })
  }

  // 我的校区
  const mySchoolsHandle = () => {
    Taro.navigateTo({
      url: '/pages/schoolList/index'
    })
  }

  // 下载app
  const downLoadApplication = () => {
    Taro.navigateTo({ url: `/pages/downLoadApp/index`})
  }

  const conceal = () => {
    Taro.navigateTo({
      url: '/pages/conceal/index'
    })
  }

  const handlerLogout = () => {
    Taro.showModal({
      title: '温馨提示',
      content: '您是否确认退出当前账号？',
      cancelColor: '#666666',
      confirmColor: '#FF9C00',
      success: function (res) {
        if (res.confirm) {
          Taro.clearStorageSync()
          Taro.reLaunch({url: '/pages/index/index'})
        }
      }
    })
  }

  const goAuthoration = () => {
    Taro.navigateTo({ url: '/pages/authorization/index' })
  }

  useDidShow(() => {
    getStorageUserInfo()
  })

  useShareAppMessage(res => {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '校园颂',
      // imageUrl: '',
      path: '/pages/index/index'
    }
  })

  const startmessage = res => {
    console.log('startmessage', res)
  }
  const completemessage = res => {
    console.log('completemessage', res)
  }

  // 获取商户电话
  const getPhone = () => {
    getSchoolPhone().then(res => {
      console.log('res', res)
      if (res.data === '00000-00000') {
        setSmanagerPhone(res)
      }
    })
  }

  const wxGroupClick = (e) => {

    console.log('e',e )
    // e.preventDefault()
    // return false
  }

  return (
    <View className={styles.my}>
      <View className={styles.header}>
        <Image src={HeadBg} className={styles.headerImg} />
        <View className={styles.userInfo}>
          <AtAvatar circle image={avatarUrl}></AtAvatar>
          {!isLogin ? (
            <View className={styles.not_login} onClick={goAuthoration}>
              <View className={styles.tip}>
                {nickName ? (
                  <View>Hi~{nickName}</View>
                ) : (
                  <View>Hi~等你好久了</View>
                )}
              </View>
              {hasUserInfo ? (
                <AtButton className={styles.btn}>
                  点击登录/注册
                </AtButton>
              ) : (
                <AtButton className={styles.btn}>
                  获取头像昵称
                </AtButton>
              )}
            </View>
          ) : (
            <View className={styles.baseInfo}>
              <View className={styles.name}>{nickName}</View>
            </View>
          )}
        </View>
      </View>
      {/* 我的收藏、我的评价等 */}
      <View className={styles.toolsContainer}>
        <AtGrid
          columnNum={4}
          hasBorder={false}
          data={toolsList}
          onClick={gridClick}
          className={styles.gridItem}
        />
      </View>
      {/* 跳转页面 */}
      <View className={styles.atList}>
        <AtList>
          <AtListItem title='关于我们' arrow='right' onClick={aboutUs} />
          <AtListItem title='政策隐私' arrow='right' onClick={conceal} />
          <View className={styles.shareBox}>
            <Button openType='share' className={styles.originBtn}></Button>
            <AtListItem title='分享小程序' arrow='right' />
          </View>
          <AtListItem title='下载客户端' arrow='right' onClick={downLoadApplication} />
          <AtListItem
            title='客服电话'
            extraText={sManagerPhone}
            onClick={() => callPhone(sManagerPhone)}
          />

          {/* <AtListItem title='我的推荐' arrow='right' /> */}
          {/* <AtListItem title='我的校区' arrow='right' onClick={mySchoolsHandle} /> */}
        </AtList>
      </View>
      {
        wxGroupUrl && (
          <View className={styles.addWchatGroup} onClick={wxGroupClick}>
            <cell startmessage={startmessage} contactText='加入本校区互动福利群'  completemessage={completemessage} url={wxGroupUrl}/>
          </View>
        )
      }

      <View className={styles.footer} onClick={handlerLogout}>
            退出账号
        </View>
    </View>
  )
}

export default connect(({ user }) => ({
  user
}), dispatch => ({
  dispatch
}))(My)
